<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>徽章编辑</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type="text/css">
    table.altrowstable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #a9c6c9;
        border-collapse: collapse;
    }
    table.altrowstable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
    }
    table.altrowstable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
    }
    .oddrowcolor{
        background-color:#d4e3e5;
    }
    .evenrowcolor{
        background-color:#c3dde0;
    }
    img{
        width: 30px;
        height: 30px;
    }
</style>
<script type="text/javascript">
    function altRows(id){
        if(document.getElementsByTagName){

            var table = document.getElementById(id);
            var rows = table.getElementsByTagName("tr");

            for(i = 0; i < rows.length; i++){
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
                }else{
                    rows[i].className = "oddrowcolor";
                }
            }
        }
    }

    window.onload=function(){
        altRows('alternatecolor');
        var file;
        $(".badge_change").click(function () {
            var bid = $(this).parents("tr").find("#badge_id").text();
            var bname = $(this).parents("tr").find("#badge_name").val();
            var bmes = $(this).parents("tr").find("#badge_describe").val();
            var bprice = $(this).parents("tr").find("#badge_price").val();
            file = $(this).parents("tr").find(".file");
            console.log(file);
            console.log(bname);
            console.log(bmes);
            console.log(bprice);
            var formdata = new FormData();
            formdata.append('bid',bid);
            formdata.append('bname',bname);
            formdata.append('bmes', bmes);
            formdata.append('bprice',bprice);
            if (file != null) {
                //ajax上传
                $.ajax({
                    async: false,
                    type: 'Post',
                    url: "updateBadge.do",
                    dataType: 'json',
                    data: formdata,
                    contentType: false,//ajax上传图片需要添加
                    processData: false,//ajax上传图片需要添加
                    success: function (back) {
                        if (back==1){
                            location.reload();
                        }
                    }
                })
            }
        })
        //删除
        $(".badge_delete").click(function () {
            var bid = $(this).parents("tr").find("#badge_id").text();
            var bpath = $(this).parents("tr").find("#badge_path").text();
            console.log(bid);
            console.log(bpath);
            $.ajax({
                async: false,
                type: 'Post',
                url: "deleteBadge.do",
                dataType: 'json',
                data: "bid="+bid+"&bpath="+bpath,
                success: function (back) {
                    if (back==1){
                        location.reload();
                    }
                }
            })

        })

    }
</script>
<body>
    <table width="100%" class="altrowstable" id="alternatecolor">
        <tr>
            <th>徽章编号</th>
            <th>徽章名称</th>
            <th>徽章图片</th>
            <th>徽章描述</th>
            <th>徽章价格</th>
            <th>徽章编辑</th>
        </tr>
        <tr th:each="badgeList:${badgeList}">
            <td th:text="${badgeList.bid}" align="center" id="badge_id"></td>
            <td style="text-align: center">
                <input type="text" th:value="${badgeList.bname}"  id="badge_name">
            </td>
            <td style="text-align: center">
<!--                <img src="../../../images/badge/0397d72f-e895-46d6-8ac3-6817b598ef23.jpg">-->
                <span th:text="${badgeList.bpath}" style="display: none" id="badge_path"></span>
                <img th:src="${badgeList.bpath}" style="width: 30px;height: 30px">
<!--                <input type="file" class="file" accept="image/gif,image/jpeg, image/png, image/jpg" id="badge_picture"-->
<!--                       value="上传徽章">-->
            </td>
            <td style="text-align: center">
                <input type="text" th:value="${badgeList.bmes}" id="badge_describe">
            </td>
            <td style="text-align: center">
                <input type="text" th:value="${badgeList.bprice}" id="badge_price">
            </td>
            <td style="text-align: center">
                <input type="button" class="badge_change" value="修改">
                <input type="button" class="badge_delete" value="删除">
            </td>
        </tr>

    </table>

</body>
</html>